import { useState, useEffect } from 'react';
import TableRender from '@/components/TableRender';
import OperaBtnRender from '@/components/OperaBtnRender';
import AddRemindModal from './AddRemindModal';
import RelateRemindUser from './RelateRemindUser';
import { getTableDataOp, deleteNotice } from '../service';
import { Popconfirm, message } from 'antd';


//状态Map
const stateMap = {
  0: '关闭',
  1: '开启',
};

export default ({ query, pages, setPages, headerHeight }) => {
  const [data, setData] = useState([]);
  const [recordData, setRecordData] = useState({}); //单行的数据
  const [visible, setVisible] = useState(false); //打开弹窗的visible

  useEffect(() => {
    getTableListFunc();
  }, [query, pages.current, pages.pageSize]);

  const getTableListFunc = async () => {
    START_LOADING();
    const params = {
      ...query,
      uuid: query?.uuid?.value || undefined,
      size: pages.pageSize,
      current: pages.current,
    };
    const { data, success } = await getTableDataOp(params);
    if (success) {
      const { records = [], total = 0 } = data || {};
      pages.total = total;
      setData(records);
    }
    END_LOADING();
  };

  const columns = [
    {
      title: '序号',
      code: 'index',
      fixed: 'left',
      width: 60,
      render: (t, r, i) => i + 1,
    },
    {
      title: '提醒类型',
      code: 'noticeTypeName',
      render: (text, record) => (
        <span
          onClick={() => {
            setRecordData(record);
            setVisible('addRemind');
          }}
          style={{ cursor: 'pointer' }}
          className="common-color1"
        >
          {text}
        </span>
      ),
      width: 125,
    },
    {
      title: '联系人',
      name: 'names',
      render: (text, { names }) => {
        if (Array.isArray(names)) {
          return <>{names.join(',')}</>;
        }
      },
      width: 120,
    },
    {
      title: '状态',
      code: 'state',
      render: (text) => {
        return <>{stateMap[text]}</>;
      },
      width: 50,
    },
    {
      title: '最后操作时间',
      code: 'updateTime',
      width: 95,
    },
    {
      title: '操作',
      width: 200,
      fixed: 'right',
      code: 'isDefault',
      render: (text, record) => (
        <span className="opera-span-common">
          <span
            onClick={() => {
              setRecordData(record);
              setVisible('relateRemind');
            }}
          >
            关联
          </span>
          <i>|</i>
          <Popconfirm
            title="确定要删除吗?"
            onConfirm={() => handleDelete(record)}
            okText="确定"
            cancelText="取消"
          >
            <span>删除</span>
          </Popconfirm>
        </span>
      ),
    },
  ];

  //删除提醒
  const handleDelete = async (record) => {
    START_LOADING();
    const { success } = await deleteNotice({
      noticeId: record.id,
    });
    if (success) {
      getTableListFunc();
      message.success('删除成功');
    }
    END_LOADING();
  };

  //新建提醒项目弹窗
  const AddRemindModalProps = {
    visible: visible == 'addRemind',
    recordData,
    handleCancel() {
      setVisible(false);
      setRecordData({});
    },
    handleOk() {
      setVisible(false);
      setRecordData({});
      getTableListFunc();
    },
  };

  //关联提醒联系人
  const RelateRemindUserProps = {
    visible: visible == 'relateRemind',
    recordData,
    handleCancel() {
      setVisible(false);
      setRecordData({});
      getTableListFunc();
    },
  };


  //表格组件
  const TableRenderProps = {
    data,
    columns,
    style: {
      height: `calc(100vh - ${headerHeight + 224}px)`
    },
    pageConfig: {
      pages,
      handlePageSize(page, size) {
        console.log(page, size)
        setPages({
          ...pages,
          current: page,
          pageSize: size
        });
      }
    }
  }

    //操作按钮
    const btnArr = [
      { elType: 'button', text: '新建提醒', onClick: () => setVisible('addRemind') }
    ]
  

  return (
    <>
      <div className='global-page-wrap'>
        <OperaBtnRender style={{ marginBottom: '12px' }} btnArr={btnArr} />
        <TableRender {...TableRenderProps} />
      </div>
      <AddRemindModal {...AddRemindModalProps} />
      <RelateRemindUser {...RelateRemindUserProps} />
    </>
  );
};
